<!-- 我的-订单-列表 -->
<script setup>
	import {
		ref,
		reactive
	} from 'vue';
	import {
		onLoad,
		onShow,
		onPageScroll,
		onReachBottom
	} from '@dcloudio/uni-app'
	import {
		getQryOrdApi
	} from '@/api/my/order.js'
	// 数据
	const data = reactive({
		current: 1,
		list: [{
			ordItemList: [{
				prodMainPic: "",
				prodName: ""
			}]
		}],
		pageNo: 1, // 当前页码
		pageSize: 10, // 每页数量
		totalPages: 10, // 总页数
		status: 'loadmore',
	})
	// tabs-list
	const tabsList = [{
			name: '全部',
			id: 1
		},
		{
			name: '待付款',
			id: 2
		},
		{
			name: '待使用',
			id: 3
		},
		{
			name: '已完成',
			id: 4
		},
		{
			name: '退款/取消',
			id: 5
		},
	]
	// tabs change
	function tabsChange(item, index) {
		data.current = item.id
		data.list = []
		data.page = 1
		// getList()
	}
	// 订单详情
	const goToDetail = (ordId) => {
		uni.navigateTo({
			url: `/subPackage/my/order/detail?ordId=${ordId}`
		})
	}
	// 查看凭证
	const lookVoucher = (item) => {
		uni.navigateTo({
			url: `/subPackage/my/order/voucher?item=${JSON.stringify(item)}`
		})
	}
	// 删除订单
	const showDelModal = ref(false)
	const deleteOrder = () => {
		showDelModal.value = false
	}

	// 创建响应式数据  
	const list1 = reactive([{
			name: '全部',
			id: 0,
		},
		{
			name: '待付款',
			id: 1,
		},
		{
			name: '待使用',
			id: 2,
		},
		{
			name: '待评价',
			id: 5,
		},
		{
			name: '售后/退款',
			id: 8,
		}
	]);

	const current = ref()

	onLoad((options) => {
		// options是传递过来的参数对象
		// console.log('传递的参数是:', options); // 输出参数值
		if (options.val === '') {
			current.value = undefined
		} else {
			current.value = options.val
		}
		// console.log('options.val', options.val); // 输出参数值
		getQryOrd()
	})


	// const qryOrdList = ref()  
	const status = ref()
	const getQryOrd = () => {
		console.log('current.value:===== ', current.value);
		getQryOrdApi({
			pageSize: data.pageSize,
			pageNum: data.pageNo,
			status: status.value,
		}).then(res => {
			const list = res.data
			const total = res.total
			data.totalPages = Math.ceil(total / data.pageSize)
			data.pageNo === 1 ? data.list = list : data.list = [...data.list, ...list]
			data.pageNo++;
			data.status = data.pageNo >= data.totalPages ? 'nomore' : 'loadmore'

		})
	}


	// 监听页面滚动到底部
	onReachBottom(() => {
		if (data.status !== 'loadmore') return
		getQryOrd()
	})




	// 定义方法  
	function click(item) {

		if (item.id === 0) {
			status.value = undefined
		} else {
			status.value = item.id
			console.log('status.value: ====', status.value);
		}
		data.pageNo = 1
		getQryOrd()

	}
</script>

<template>
	<view class="my-order-page">
		<view class="tabs-box">


			<up-tabs :list="list1" :current="current" lineWidth="40" lineColor=" #19d325" :activeStyle="{
            color: '#303133',
            fontWeight: 'bold',
            transform: 'scale(1.05)'
        }" :inactiveStyle="{
            color: '#606266',
            transform: 'scale(1)'
        }" itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;" @click="click"></up-tabs>


		</view>

		<!-- 空状态 -->
		<up-empty v-if="data.list.length <= 0" mode="order" text="暂无订单"></up-empty>
		<!-- 订单列表 -->
		<view v-else class="order-list">
			<view v-for="item in data.list" :key="item.ordId" class="order-item" @click="goToDetail(item.ordId)">
				<!-- 订单信息 -->
				<view class="order-info">
					<view class="left" v-for="it in item.ordItemList" :key="it.ordId" v-if="item.aptInfo===null">
						<view class="pic-box">
							<image :src="it.prodMainPic" style="width: 144rpx;height: 144rpx;" />
						</view>
						<view class="info">
							<view class="name" style="width: 330rpx;">{{it.prodName}}</view>
							<view class="type">场地:{{item.userName}}</view>
							<view class="time">{{item.reservationTime}}</view>
						</view>
					</view>

					<view class="left" v-if="item.aptInfo!=null">
						<view class="pic-box">
							<image :src="item.aptInfo.spAvatar" style="width: 144rpx;height: 144rpx;" />
						</view>
						<view class="info">
							<view class="name" style="width: 330rpx;">{{item.aptInfo.shopName}}</view>
							<view class="type">服务时长: {{item.aptInfo.serviceTime}}分钟/次</view>
							<view class="time"> {{item.aptInfo.aptTime}}</view>
						</view>
					</view>

					<view class="right">
						<view class="status status3" v-if="item.status==='1'">待付款</view>
						<view class="status status3" v-if="item.status==='2'">待使用</view>
						<view class="status status3" v-if="item.status==='3'">已使用</view>
						<view class="status status3" v-if="item.status==='4'">已退款</view>
						<view class="status status3" v-if="item.status==='5'">待评价</view>
						<view class="status status3" v-if="item.status==='6'">已评价</view>
						<view class="status status3" v-if="item.status==='7'">已取消</view>
						<view class="status status3" v-if="item.status==='8'">退款中</view>
						<view class="status status3" v-if="item.status==='9'">已完成</view>
						<view class="status status3" v-if="item.status==='10'">待接单</view>
						<view class="price">￥{{ item.actualAmount }}</view>
					</view>
				</view>





				<!-- 分割线 -->
				<view class="line"></view>
				<!-- 订单操作 -->
				<view class="operation-box">
					<!-- 更多操作 -->
					<view class="more-box">
						<view class="btn">更多</view>
						<view v-if="false" class="popup-list">
							<view class="popup-box">
								<view v-if="true" class="item refund">申请退款</view>
								<view v-if="true" class="item">删除订单</view>
							</view>
						</view>
					</view>
					<!-- 按钮 -->
					<view class="btns-box">
						<view v-if="true" class="btn voucher" @click="lookVoucher(item)">查看凭证</view>
						<view v-if="false" class="btn pay">立即付款</view>
						<view v-if="false" class="btn evaluate">评价</view>
						<view v-if="false" class="btn again">再次预约</view>
						<view v-if="false" class="btn progress">退款进度</view>
					</view>
				</view>
			</view>
			<!-- 加载更多 -->
			<!-- 	<up-loadmore :status="data.status" :loading-text="`努力加载中`" :loadmore-text="'加载更多'" :nomore-text="'没有更多了'" /> -->
			<!-- 删除订单 -->
			<up-modal :show="showDelModal" @confirm="deleteOrder" ref="uModal" :asyncClose="true"
				:showCancelButton="true" title="确认删除此订单？" content="订单删除后将无法恢复" confirmText="删除" confirmColor="#FF1F00"
				cancelColor="#929397" width="540rpx" contentTextAlign="center"></up-modal>
		</view>
	</view>
</template>

<style lang="scss" scoped>
	.my-order-page {
		padding-bottom: 60rpx;
		min-height: 100vh;
		background: #F9F9F9;

		// tabs
		& .tabs-box {
			display: flex;
			align-items: center;
			justify-content: space-between;
			position: fixed;
			top: 0;
			left: 0;
			padding: 12rpx 32rpx;
			z-index: 9;
			width: 100vw;
			height: 88rpx;
			background: #FFFFFF;

			& .item {
				padding: 8rpx 24rpx;
				font-weight: 500;
				font-size: 24rpx;
				color: #303133;

				&.active {
					font-size: 28rpx;
					color: #008043;
					background: #E7FFE8;
					border-radius: 80rpx;
				}
			}
		}

		// 空
		&::v-deep .u-empty {
			padding-top: 318rpx;
		}

		// 订单列表
		& .order-list {
			padding: 28rpx 32rpx;
			margin-top: 88rpx;

			& .order-item {
				padding: 30rpx;
				margin-bottom: 20rpx;
				background: #FFFFFF;
				border-radius: 24rpx 24rpx 24rpx 24rpx;

				// 订单信息
				& .order-info {
					display: flex;
					justify-content: space-between;

					& .left {
						display: flex;

						& .pic-box {
							border-radius: 12rpx;
						}

						& .info {
							padding-left: 22rpx;

							& .name {
								font-weight: 600;
								font-size: 32rpx;
								color: #303133;
							}

							& .type {
								margin-top: 12rpx;
								font-weight: 400;
								font-size: 24rpx;
								color: #B7B7B7;
							}

							& .time {
								margin-top: 4rpx;
								font-weight: 400;
								font-size: 24rpx;
								color: #B7B7B7;
							}
						}
					}

					& .right {
						& .status {
							padding: 4rpx 12rpx;
							font-weight: 400;
							font-size: 24rpx;
							color: #FFFFFF;
							border-radius: 4rpx;

							&1 {
								color: #008043;
								background-color: #E7FFE8;
							}

							&2 {
								color: #FF891D;
								background-color: #FFEDDD;
							}

							&3 {
								color: #838385;
								background-color: #F4F4F4;
							}
						}

						& .price {
							margin-top: 104rpx;
							font-weight: 500;
							font-size: 36rpx;
							background: linear-gradient(0deg, #21FF2B 0%, #303133 100%);
							background-clip: text;
							-webkit-background-clip: text;
							-webkit-text-fill-color: transparent;
						}
					}
				}

				// 分割线
				& .line {
					margin: 24rpx 0;
					width: 622rpx;
					border: 1rpx solid #D9D9D9;
					opacity: 0.5;
				}

				// 操作
				& .operation-box {
					display: flex;
					align-items: center;
					justify-content: space-between;

					// 更多操作
					& .more-box {
						position: relative;

						& .btn {
							font-weight: 400;
							font-size: 28rpx;
							color: #838385;
						}

						& .popup-list {
							position: absolute;
							top: 60rpx;
							left: -4rpx;
							z-index: 9;
							border-radius: 14rpx;
							width: 166rpx;
							background: #FFFFFF;
							box-shadow: 0rpx 6rpx 15rpx 0rpx rgba(0, 0, 0, 0.25);


							// 三角形状
							&::before {
								content: '';
								position: absolute;
								left: 20rpx;
								top: -10rpx;
								z-index: 1;
								width: 20rpx;
								height: 20rpx;
								border-radius: 0rpx;
								background-color: #fff;
								transform: rotate(-45deg);
								box-shadow: 0rpx 6rpx 15rpx 0rpx rgba(0, 0, 0, 0.25);
							}

							& .popup-box {
								position: relative;
								z-index: 2;
								background-color: #fff;
								border-radius: 14rpx;

								& .item {
									position: relative;
									height: 83rpx;
									font-weight: 400;
									font-size: 24rpx;
									color: #303133;
									line-height: 83rpx;
									text-align: center;

									&.refund::after {
										position: absolute;
										bottom: 0;
										left: 12rpx;
										content: '';
										width: 140rpx;
										height: 0rpx;
										border: 1rpx solid #D9D9D9;
										opacity: 0.5;
									}
								}
							}

						}
					}

					// 按钮组
					& .btns-box {
						display: flex;
						align-items: center;

						& .btn {
							margin-left: 24rpx;
							padding: 12rpx 32rpx;
							font-weight: 500;
							font-size: 24rpx;
							border-radius: 183rpx;

							&.voucher {
								color: #FFFFFF;
								background: #303133;
							}

							&.pay {
								color: #FFFFFF;
								background: #303133;
							}

							&.evaluate {
								color: #838385;
								border: 2rpx solid #B7B7B7;
							}

							&.again {
								color: #303133;
								border: 2rpx solid #303133;
							}

							&.progress {
								color: #303133;
								border: 2rpx solid #303133;
							}
						}
					}
				}
			}
		}
	}
</style>